<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('成绩录入')"/>
    <style>
        .rating {
            display: inline-block;
            width: 15%;
            text-align: left;
        }

        .star {
            font-size: 30px;
            color: rgb(222, 222, 222);
            cursor: pointer;
        }

        .star.active {
            color: red;
        }

        .score-name {
            width: 80px;
        }

        .div1 {
            background: #efefef;
            margin-bottom: 5px;
            border-radius: 7px;
        }

    </style>


</head>
<body class="gray-bg">
<input name="childCourseId" id="childCourseId" th:value="${childCourseId}" type="hidden"/>
<input name="scoreFlag" id="scoreFlag" th:value="${scoreFlag}" type="hidden"/>
<div class="wrapper wrapper-content animated fadeInRight">
    <div id="saveScoreBth" style="margin-bottom: 10px">
        <button id="submitBtn" style="width: 100px;margin-top: 10px" type="button" onclick="saveScore(1)"
                class="btn btn-primary" th:disabled="${scoreFlag==1?'true':'false'}">提交成绩
        </button>
        <button id="saveBtn" style="width: 100px;margin-top: 10px" type="button" onclick="saveScore(0)"
                class="btn btn-primary" th:disabled="${scoreFlag==1?'true':'false'}">保存记录
        </button>
    </div>
    <div class="row">

        <div class="col-sm-12" id="childList">
            <!--            <div class="ibox">-->
            <!--                <div class="ibox-title">-->
            <!--                    <h5>邱传程</h5>-->
            <!--                </div>-->
            <!--                <div class="ibox-content">-->
            <!--                    <div class="div1">-->
            <!--                        <label style="font-size: 20px;padding-right: 40px">阅读技能</label>-->
            <!--                        <label class="score-name">专注度</label>-->
            <!--                        <div class="rating" id="zzd">-->
            <!--                            <span class="star" onclick="starClk(this,'zzd')" data-value="1">&#9733;</span>-->
            <!--                            <span class="star" onclick="starClk(this,'zzd')"data-value="2">&#9733;</span>-->
            <!--                            <span class="star" onclick="starClk(this,'zzd')"data-value="3">&#9733;</span>-->
            <!--                            <span class="star" onclick="starClk(this,'zzd')"data-value="4">&#9733;</span>-->
            <!--                            <span class="star" onclick="starClk(this,'zzd')"data-value="5">&#9733;</span>-->
            <!--                        </div>-->
            <!--                        <label class="score-name">情绪状态</label>-->
            <!--                        <div class="rating" id="">-->
            <!--                            <span class="star" onclick="starClk(this,'qxzt')" data-value="1">&#9733;</span>-->
            <!--                            <span class="star" onclick="starClk(this,'qxzt')" data-value="2">&#9733;</span>-->
            <!--                            <span class="star" onclick="starClk(this,'qxzt')" data-value="3">&#9733;</span>-->
            <!--                            <span class="star" onclick="starClk(this,'qxzt')" data-value="4">&#9733;</span>-->
            <!--                            <span class="star" onclick="starClk(this,'qxzt')" data-value="5">&#9733;</span>-->
            <!--                        </div>-->
            <!--                        <label class="score-name">技能掌握度</label>-->
            <!--                        <div class="rating" id="jnzwd">-->
            <!--                            <span class="star" onclick="starClk(this,'jnzwd')" data-value="1">&#9733;</span>-->
            <!--                            <span class="star" onclick="starClk(this,'jnzwd')" data-value="2">&#9733;</span>-->
            <!--                            <span class="star" onclick="starClk(this,'jnzwd')" data-value="3">&#9733;</span>-->
            <!--                            <span class="star" onclick="starClk(this,'jnzwd')" data-value="4">&#9733;</span>-->
            <!--                            <span class="star" onclick="starClk(this,'jnzwd')" data-value="5">&#9733;</span>-->
            <!--                        </div>-->
            <!--                        <label class="score-name">阅读速度</label>-->
            <!--                        <input  type="text" id="ydsu"/>字/分钟-->
            <!--                    </div>-->
            <!--                    <div class="div1">-->
            <!--                        <label style="font-size: 20px;padding-right: 40px">知识理解</label>-->
            <!--                        <label class="score-name">口语表达</label>-->
            <!--                        <div class="rating" id="kybd">-->
            <!--                            <span class="star" onclick="starClk(this,'kybd')" data-value="1">&#9733;</span>-->
            <!--                            <span class="star" onclick="starClk(this,'kybd')" data-value="2">&#9733;</span>-->
            <!--                            <span class="star" onclick="starClk(this,'kybd')" data-value="3">&#9733;</span>-->
            <!--                            <span class="star" onclick="starClk(this,'kybd')" data-value="4">&#9733;</span>-->
            <!--                            <span class="star" onclick="starClk(this,'kybd')" data-value="5">&#9733;</span>-->
            <!--                        </div>-->
            <!--                        <label class="score-name">字词理解</label>-->
            <!--                        <div class="rating" id="zclj">-->
            <!--                            <span class="star" onclick="starClk(this,'zclj')" data-value="1">&#9733;</span>-->
            <!--                            <span class="star" onclick="starClk(this,'zclj')" data-value="2">&#9733;</span>-->
            <!--                            <span class="star" onclick="starClk(this,'zclj')" data-value="3">&#9733;</span>-->
            <!--                            <span class="star" onclick="starClk(this,'zclj')" data-value="4">&#9733;</span>-->
            <!--                            <span class="star" onclick="starClk(this,'zclj')" data-value="5">&#9733;</span>-->
            <!--                        </div>-->
            <!--                        <label class="score-name">阅读理解</label>-->
            <!--                        <div class="rating" id="ydlj">-->
            <!--                            <span class="star" onclick="starClk(this,'ydlj')" data-value="1">&#9733;</span>-->
            <!--                            <span class="star" onclick="starClk(this,'ydlj')" data-value="2">&#9733;</span>-->
            <!--                            <span class="star" onclick="starClk(this,'ydlj')" data-value="3">&#9733;</span>-->
            <!--                            <span class="star" onclick="starClk(this,'ydlj')" data-value="4">&#9733;</span>-->
            <!--                            <span class="star" onclick="starClk(this,'ydlj')" data-value="5">&#9733;</span>-->
            <!--                        </div>-->
            <!--                        <label class="score-name">阅读准确率</label>-->
            <!--                        <input  type="text" id="ydzql"/>%-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--            </div>-->

        </div>

    </div>
</div>
<th:block th:include="include :: footer"/>
<script>
    var prefix = ctx + "reading/comprehension";
    var childCourseId = $("#childCourseId").val();
    var childs = [];


    $(document).ready(function () {
        $(".star1").click(function () {
            var rating = $(this).data("value");
            $(".star").removeClass("active");
            $(this).prevAll().addClass("active");
            $(this).addClass("active");
            $("#rating-value").text(rating);
        });

        listChildScore();
    });

    function starClk(obj, id) {
        var rating = obj.dataset.value;
        $("#" + id).children().removeClass("active");
        $(obj).prevAll().addClass("active");
        $(obj).addClass("active");
        $("#" + id)[0].dataset.value = rating;
    }

    function saveScore(submitFlag) {
        if (childs.length > 0) {
            var scoreList = [];
            var isAllNull = true;
            for (var i in childs) {
                var childId = childs[i];
                var data = {
                    "childId": childId,
                    "zzd": $("#zzd_" + childId)[0].dataset.value,
                    "qxzt": $("#qxzt_" + childId)[0].dataset.value,
                    "jnzwd": $("#jnzwd_" + childId)[0].dataset.value,
                    "ydsd": $("#ydsd_" + childId).val(),

                    "kybd": $("#kybd_" + childId)[0].dataset.value,
                    "zclj": $("#zclj_" + childId)[0].dataset.value,
                    "ydlj": $("#ydlj_" + childId)[0].dataset.value,
                    "ydzql": $("#ydzql_" + childId).val()
                };
                scoreList.push(data);
                if ($("#zzd_" + childId)[0].dataset.value != "" ||
                    $("#qxzt_" + childId)[0].dataset.value != "" ||
                    $("#jnzwd_" + childId)[0].dataset.value != "" ||
                    $("#ydsd_" + childId).val() != "" ||

                    $("#kybd_" + childId)[0].dataset.value != "" ||
                    $("#zclj_" + childId)[0].dataset.value != "" ||
                    $("#ydlj_" + childId)[0].dataset.value != "" ||
                    $("#ydzql_" + childId).val() != "") {
                    isAllNull = false;
                }
            }
            if (isAllNull && submitFlag==1) {
                $.modal.alertError("成绩为空,不可提交!");
                return;
            }
            // console.log(reqData);
            var reqData = {
                "childCourseId": childCourseId,
                "scoreList": scoreList,
                "submitFlag": submitFlag
            };
            if(submitFlag==1){
                $.modal.confirm("提交后成绩不可修改,确定提交吗?", function () {
                    $.ajax({
                        url: prefix + "/saveScore",
                        type: 'POST',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        data: JSON.stringify(reqData),
                        error: function (request) {
                            $.modal.closeLoading();
                            $.modal.alertError("系统错误");
                        },
                        success: function (data) {
                            $.modal.closeLoading();
                            $.modal.msg("保存成功");
                            if (submitFlag == 1) {
                                $("#submitBtn").attr("disabled", "disabled");
                                $("#saveBtn").attr("disabled", "disabled");
                            }
                        }
                    })
                })
            }else {
                $.ajax({
                    url: prefix + "/saveScore",
                    type: 'POST',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: JSON.stringify(reqData),
                    error: function (request) {
                        $.modal.closeLoading();
                        $.modal.alertError("系统错误");
                    },
                    success: function (data) {
                        $.modal.closeLoading();
                        $.modal.msg("保存成功");
                        if (submitFlag == 1) {
                            $("#submitBtn").attr("disabled", "disabled");
                            $("#saveBtn").attr("disabled", "disabled");
                        }
                    }
                })
            }


        }

    }

    function listChildScore() {
        console.log(childCourseId)
        $.ajax({
            url: prefix + "/listChildScore?childCourseId=" + childCourseId,
            type: 'GET',
            error: function (request) {
                $.modal.alertError("系统错误");
            },
            success: function (data) {
                console.log(data);
                if (data.data.length > 0) {
                    var html = ""
                    for (var i in data.data) {
                        var obj = data.data[i];
                        var childId = obj.childId;
                        childs.push(childId);
                        var score = JSON.parse(obj.score);
                        var active = "active", none = "";
                        html += '<div class="ibox"><div class="ibox-title">\n' +
                            '                    <h5>学员姓名:  ' + obj.childName + '</h5>\n' +
                            '                </div>\n' +
                            '                <div class="ibox-content">\n' +
                            '                    <div class="div1">\n' +
                            '                        <label style="font-size: 20px;padding-right: 40px">阅读技能</label>\n' +
                            '                         <label class="score-name">专注度</label>' +
                            '                        <div class="rating" data-value="' + (score != null ? score.zzd : '') + '" id="zzd_' + childId + '">' +
                            '                            <span class="star ' + (score != null && score.zzd >= 1 ? 'active' : '') + '" onclick="starClk(this,\'zzd_' + childId + '\')" data-value="1">&#9733;</span>\n' +
                            '                            <span class="star ' + (score != null && score.zzd >= 2 ? 'active' : '') + '" onclick="starClk(this,\'zzd_' + childId + '\')"data-value="2">&#9733;</span>\n' +
                            '                            <span class="star ' + (score != null && score.zzd >= 3 ? 'active' : '') + '" onclick="starClk(this,\'zzd_' + childId + '\')"data-value="3">&#9733;</span>\n' +
                            '                            <span class="star ' + (score != null && score.zzd >= 4 ? 'active' : '') + '" onclick="starClk(this,\'zzd_' + childId + '\')"data-value="4">&#9733;</span>\n' +
                            '                            <span class="star ' + (score != null && score.zzd >= 5 ? 'active' : '') + '" onclick="starClk(this,\'zzd_' + childId + '\')"data-value="5">&#9733;</span>\n' +
                            '                        </div>\n' +
                            '                         <label class="score-name">情绪状态</label>' +
                            '                           <div class="rating" data-value="' + (score != null ? score.qxzt : '') + '" id="qxzt_' + childId + '">\n' +
                            '                            <span class="star ' + (score != null && score.qxzt >= 1 ? 'active' : '') + '" onclick="starClk(this,\'qxzt_' + childId + '\')" data-value="1">&#9733;</span>\n' +
                            '                            <span class="star ' + (score != null && score.qxzt >= 2 ? 'active' : '') + '" onclick="starClk(this,\'qxzt_' + childId + '\')" data-value="2">&#9733;</span>\n' +
                            '                            <span class="star ' + (score != null && score.qxzt >= 3 ? 'active' : '') + '" onclick="starClk(this,\'qxzt_' + childId + '\')" data-value="3">&#9733;</span>\n' +
                            '                            <span class="star ' + (score != null && score.qxzt >= 4 ? 'active' : '') + '" onclick="starClk(this,\'qxzt_' + childId + '\')" data-value="4">&#9733;</span>\n' +
                            '                            <span class="star ' + (score != null && score.qxzt >= 5 ? 'active' : '') + '" onclick="starClk(this,\'qxzt_' + childId + '\')" data-value="5">&#9733;</span>\n' +
                            '                        </div>\n' +
                            '                         <label class="score-name">技能掌握度</label>' +
                            '                        <div class="rating" data-value="' + (score != null ? score.jnzwd : '') + '" id="jnzwd_' + childId + '">' +
                            '                            <span class="star ' + (score != null && score.jnzwd >= 1 ? 'active' : '') + '" onclick="starClk(this,\'jnzwd_' + childId + '\')" data-value="1">&#9733;</span>\n' +
                            '                            <span class="star ' + (score != null && score.jnzwd >= 2 ? 'active' : '') + '" onclick="starClk(this,\'jnzwd_' + childId + '\')" data-value="2">&#9733;</span>\n' +
                            '                            <span class="star ' + (score != null && score.jnzwd >= 3 ? 'active' : '') + '" onclick="starClk(this,\'jnzwd_' + childId + '\')" data-value="3">&#9733;</span>\n' +
                            '                            <span class="star ' + (score != null && score.jnzwd >= 4 ? 'active' : '') + '" onclick="starClk(this,\'jnzwd_' + childId + '\')" data-value="4">&#9733;</span>\n' +
                            '                            <span class="star ' + (score != null && score.jnzwd >= 5 ? 'active' : '') + '" onclick="starClk(this,\'jnzwd_' + childId + '\')" data-value="5">&#9733;</span>\n' +
                            '                        </div>\n' +
                            '                        <label class="score-name">阅读速度：</label>\n' +
                            '                        <input  type="text" id="ydsd_' + childId + '" value="' + (score != null ? score.ydsd : '') + '" />  字/分钟\n' +
                            '                    </div>\n' +
                            '                    <div class="div1">\n' +
                            '                        <label style="font-size: 20px;padding-right: 40px">知识理解</label>\n' +
                            '                         <label class="score-name">口语表达</label>' +
                            '                        <div class="rating" data-value="' + (score != null ? score.kybd : '') + '" id="kybd_' + childId + '">' +
                            '                            <span class="star ' + (score != null && score.kybd >= 1 ? 'active' : '') + '" onclick="starClk(this,\'kybd_' + childId + '\')" data-value="1">&#9733;</span>\n' +
                            '                            <span class="star ' + (score != null && score.kybd >= 2 ? 'active' : '') + '" onclick="starClk(this,\'kybd_' + childId + '\')" data-value="2">&#9733;</span>\n' +
                            '                            <span class="star ' + (score != null && score.kybd >= 3 ? 'active' : '') + '" onclick="starClk(this,\'kybd_' + childId + '\')" data-value="3">&#9733;</span>\n' +
                            '                            <span class="star ' + (score != null && score.kybd >= 4 ? 'active' : '') + '" onclick="starClk(this,\'kybd_' + childId + '\')" data-value="4">&#9733;</span>\n' +
                            '                            <span class="star ' + (score != null && score.kybd >= 5 ? 'active' : '') + '" onclick="starClk(this,\'kybd_' + childId + '\')" data-value="5">&#9733;</span>\n' +
                            '                        </div>\n' +
                            '                         <label class="score-name">字词理解</label>' +
                            '                        <div class="rating" data-value="' + (score != null ? score.zclj : '') + '" id="zclj_' + childId + '">' +
                            '                            <span class="star ' + (score != null && score.zclj >= 1 ? 'active' : '') + '" onclick="starClk(this,\'zclj_' + childId + '\')" data-value="1">&#9733;</span>\n' +
                            '                            <span class="star ' + (score != null && score.zclj >= 2 ? 'active' : '') + '" onclick="starClk(this,\'zclj_' + childId + '\')" data-value="2">&#9733;</span>\n' +
                            '                            <span class="star ' + (score != null && score.zclj >= 3 ? 'active' : '') + '" onclick="starClk(this,\'zclj_' + childId + '\')" data-value="3">&#9733;</span>\n' +
                            '                            <span class="star ' + (score != null && score.zclj >= 4 ? 'active' : '') + '" onclick="starClk(this,\'zclj_' + childId + '\')" data-value="4">&#9733;</span>\n' +
                            '                            <span class="star ' + (score != null && score.zclj >= 5 ? 'active' : '') + '" onclick="starClk(this,\'zclj_' + childId + '\')" data-value="5">&#9733;</span>\n' +
                            '                        </div>\n' +
                            '                         <label class="score-name">阅读理解</label>' +
                            '                        <div class="rating" data-value="' + (score != null ? score.ydlj : '') + '" id="ydlj_' + childId + '">' +
                            '                            <span class="star ' + (score != null && score.ydlj >= 1 ? 'active' : '') + '" onclick="starClk(this,\'ydlj_' + childId + '\')" data-value="1">&#9733;</span>\n' +
                            '                            <span class="star ' + (score != null && score.ydlj >= 1 ? 'active' : '') + '" onclick="starClk(this,\'ydlj_' + childId + '\')" data-value="2">&#9733;</span>\n' +
                            '                            <span class="star ' + (score != null && score.ydlj >= 1 ? 'active' : '') + '" onclick="starClk(this,\'ydlj_' + childId + '\')" data-value="3">&#9733;</span>\n' +
                            '                            <span class="star ' + (score != null && score.ydlj >= 1 ? 'active' : '') + '" onclick="starClk(this,\'ydlj_' + childId + '\')" data-value="4">&#9733;</span>\n' +
                            '                            <span class="star ' + (score != null && score.ydlj >= 1 ? 'active' : '') + '" onclick="starClk(this,\'ydlj_' + childId + '\')" data-value="5">&#9733;</span>\n' +
                            '                        </div>\n' +
                            '                        <label class="score-name">阅读准确率：</label>\n' +
                            '                        <input  type="text" id="ydzql_' + childId + '" value="' + (score != null ? score.ydzql : '') + '" />  %\n' +
                            '                    </div>\n' +
                            '                </div></div>';

                    }
                    $("#childList").append(html);
                }
            }
        });
    }

</script>

</body>
</html>
